<template>
    <div>
        <div class="item" v-for="item, index in chatList" :key="index" @click="changIndex(item, index)"
            :class="[index == currIndex ? 'currBg' : '']">
            <div class="avatar">
                <el-avatar :src="item.avatar" v-show="item.type == 2"></el-avatar>
                <el-avatar :src="getOneChatAvatar(item.userList)" v-show="item.type == 1"></el-avatar>
            </div>
            <div class="info">
                <div class="username" v-if="item.type == 1">
                    <span>{{ getOneChatTitle(item.userList) }}</span>
                    <span class="time">{{ item.updateTime }}</span>
                </div>
                <div class="username" v-else>
                    <span>{{ item.name }}</span>
                    <span class="time">{{ item.updateTime }}</span>
                </div>
                <div class="content">
                    <div class="content-u">{{ item.lastMessage }}</div>
                    <div v-show="item.unreadCount != 0">
                        <el-badge :value="item.unreadCount" :max="99"></el-badge>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'chat-list',
    props: ['chatList'],
    data() {
        return {
            currIndex: null
        }
    },
    methods: {
        changIndex(item, index) {
            this.currIndex = index
            item.unreadCount = 0
            this.$emit("refreshChatDetail", item)
        },
        getOneChatTitle(userList) {
            let name;
            userList.forEach(item => {
                if (item.id != this.userInfo.id) {
                    name = item.nickname
                }
            });
            return name;
        },
        getOneChatAvatar(userList) {
            let avatar;
            userList.forEach(item => {
                if (item.id != this.userInfo.id) {
                    avatar = item.avatar
                }
            });
            return avatar;
        },
        getContent(data) {
            this.chatList.forEach(item => {
                if (item.id == data.chatId) {
                    item.lastMessage = data.fileList != null ? '[文件]' : data.content
                    item.updateTime = data.createTime
                    return
                }
            })
        }
    },
    computed: {
        userInfo() {
            return this.$store.state.user.userInfo || {}
        }
    }
}
</script>

<style scoped>
.item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    margin: 10px 0;
    padding: 0 7px;
    margin-right: 20px;
    cursor: pointer;
}

.item:hover {
    background-color: #F2F6FC;
    border-radius: 5px;
}

.avatar {
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.info {
    width: calc(100% - 50px);
}

.username {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.time {
    font-size: 12px;
    color: #a2abbd;
}

.content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.content-u {
    font-size: 14px;
    color: #a2abbd;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

.currBg {
    background-color: #F2F6FC;
}
</style>